<template>
	<view class="page-voice">
		<!-- topbar -->
		<cl-topbar
			title="语音匹配"
			background-color="transparent"
			:border="false"
			color="#ffffff"
		></cl-topbar>
		<!-- 背景图 -->
		<image src="@/static/images/voice-bgc.png" mode="aspectFill" class="bgc" />

		<!-- 提示语 -->
		<view class="tips">恋爱君正在努力帮您呼叫中，请稍等... </view>

		<!-- 波纹 -->
		<view class="content">
			<view class="btn"> <image src="@/static/images/voice-btn.png" mode="" /> </view>
			<view class="ring" :class="{ 'is-dynamic': first == true }"></view>
			<view class="ring" :class="{ 'is-dynamic': second == true }"></view>
			<view class="ring" :class="{ 'is-dynamic': third == true }"></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			first: true,
			second: false,
			third: false,
		};
	},
	onReady() {
		setTimeout(() => {
			this.second = true;
		}, 800);
		setTimeout(() => {
			this.third = true;
		}, 1600);
	},
	onLoad() {
		setTimeout(() => {
			uni.showToast({
				title:"暂无匹配对象，请稍后再试~",
				icon:"none"
			})
			
			setTimeout(() => {
				uni.navigateBack({
					delta:1
				})
			}, 2000);
		}, 10000);
	},
};
</script>

<style lang="scss">
page {
	height: 100%;
}
.page-voice {
	height: 100%;
	.bgc {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
	}
	.tips {
		display: block;
		width: 100%;
		margin-top: 50rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: 400;
		color: #ffffff;
	}
	.content {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 100%;
		height: 878rpx;
		margin-bottom: 100rpx;
		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			width: 222rpx;
			height: 222rpx;
			background: linear-gradient(152deg, #ff5a70 0%, #ff829c 100%);
			border-radius: 50%;
			z-index: 9;
			image {
				width: 86rpx;
				height: 86rpx;
			}
		}
		.ring {
			position: absolute;
			top: calc(50% - 111rpx);
			left: calc(50% - 111rpx);
			width: 222rpx;
			height: 222rpx;
			border-radius: 50%;

			&.is-dynamic {
				animation: ring 3s infinite;
				@keyframes ring {
					from {
						transform: scale(1);
						background-color: #ff5a70;
					}
					to {
						transform: scale(3.5);
						background-color: transparent;
					}
				}
			}
		}
	}
}
</style>
